@using WebApp.Extensions
@model Dto.ApiResponses.AccountResponses.AccountDetailResponse
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.AccountNewPageSetting;
    var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_Account_Add";
}

@section Scripts{
    <script type="text/javascript">
        require(['Account/Add', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">General Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="photo">Photo</label>
                            <div class="fileDragHolder">
                                <canvas id="imgCanvas" width="150" height="187"></canvas>
                                <div>
                                    <a id="photo" href="#" data-bind="click: selectPhoto">Select File</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="name">Name</label>
                            <input id="name" class="form-control " data-bind="value: name" placeholder="Name" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="type">Type</label>
                            <select id="type" class="form-control" data-bind="options: accountTypes, optionsText: 'name', value: type,optionsValue: 'name', optionsCaption: '-- Select Type --'" required></select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="industry">Industry</label>
                            <select id="industry" class="form-control" data-bind="options: industries, optionsText: 'name', value: industry,optionsValue: 'name', optionsCaption: '-- Select Industry --'" required></select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">Contact Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="accountNum">Account Number</label>
                            <input id="accountNum" class="form-control" data-bind="value: accountNumber" placeholder="Account Number" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="phone">Phone</label>
                            <input id="phone" class="form-control" data-bind="value: phone" placeholder="Phone" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="mobile">Mobile</label>
                            <input id="mobile" class="form-control" data-bind="value: mobile" placeholder="Mobile" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="email">Email</label>
                            <input id="email" class="form-control " data-bind="value: email" placeholder="Email" required />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="website">Website</label>
                            <input id="website" class="form-control " data-bind="value: website" placeholder="Website" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="fax">Fax</label>
                            <input id="fax" class="form-control" data-bind="value: fax" placeholder="Fax" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">Billing Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="BStreet">Billing Street</label>
                            <input id="BStreet" class="form-control " data-bind="value: billingStreet" placeholder="Billing Street" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="BCity">Billing City</label>
                            <input id="BCity" class="form-control " data-bind="value: billingCity" placeholder="Billing City" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="BState">Billing State</label>
                            <input id="BState" class="form-control " data-bind="value: billingState" placeholder="Billing State" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="BPostalCode">Billing PostalCode</label>
                            <input id="BPostalCode" class="form-control " data-bind="value: billingPostalCode" placeholder="Billing PostalCode" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="BCountry">Billing Country</label>
                            <input id="BCountry" class="form-control " data-bind="value: billingCountry" placeholder="Billing Country" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">Shipping Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="SStreet">Shipping Street</label>
                            <input id="SStreet" class="form-control " data-bind="value: shippingStreet" placeholder="Shipping Street" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="SCity">Shipping City</label>
                            <input id="SCity" class="form-control " data-bind="value: shippingCity" placeholder="Shipping City" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="SState">Shipping State</label>
                            <input id="SState" class="form-control " data-bind="value: shippingState" placeholder="Shipping State" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="SPostalCode">Shipping PostalCode</label>
                            <input id="SPostalCode" class="form-control" data-bind="value: shippingPostalCode" placeholder="Shipping PostalCode" />
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="SCountry">Shipping Country</label>
                            <input id="SCountry" class="form-control " data-bind="value: shippingCountry" placeholder="Shipping Country" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-6">
                <legend class="h3">Other Detail</legend>
                <div class="row">
                    <div class="form-group">
                        <div class="col-md-10">
                            <label for="description">Description</label>
                            <textarea id="description" class="form-control" rows="3" data-bind="value: description" placeholder="Description"> </textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="form-group">
                <div class="row center">
                    <button class="btn btn-primary btn-lg" data-bind="click: save">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary btn-lg" data-bind="click: cancel">Cancel</button>
                </div>
            </div>
        </div>
    </section>
</div>



